<!--
 * @Author: ZephyrGao
 * @Date: 2024-02-20 14:02:18
 * @Description: 
 * Copyright (c) 2024 by ZephyrGao, All Rights Reserved. 
-->
<template>  
  <div :style="customStyle" class="fast-scroll-wrapper" ref="fastScrollRef">  
  <slot></slot>  
  </div>  

  <!-- <template :style="customStyle" class="fast-scroll">  
    <slot ref="fastScrollRef"></slot>  
  </template>   -->
</template>  

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue';  

defineOptions({
  name: 'FastScroll'
})

const props = defineProps({  
  style: {  
    type: Object,  
    default: () => ({})  
  }  
});

const fastScrollRef = ref()  
  
const scrollToTop = () => {  
  fastScrollRef.value.scrollTop = 0;  
};  
  
const scrollToBottom = () => {  
  fastScrollRef.value.scrollTop = fastScrollRef.value.scrollHeight;  
};  
  
const scrollToPosition = (position: number) => {  
  if (position >= 0 && position <= fastScrollRef.value.scrollHeight) {  
    fastScrollRef.value.scrollTop = position;  
  }  
};  
  
const customStyle = computed(() => ({  
  ...props.style,  
  // 在这里可以添加默认的样式或额外的样式  
}));  
  
onMounted(() => {  
  nextTick(() => {  
    scrollToPosition(1000); // 默认滚动到顶部  
  });  
}); 


</script>

<style scoped>

.fast-scroll-wrapper {  
  /* 你可以在这里添加一些基本的样式 */  
  overflow-y: scroll;  
  height: 100%; /* 根据需要设置高度 */  
  position: relative;  
}  

</style>